<template>
  <div class="right-board">
    <el-tabs v-model="currentTab" class="center-tabs">
      <el-tab-pane label="配置" name="field" />
      <el-tab-pane label="数据" name="data" />
      <el-tab-pane label="参数" name="location" />
    </el-tabs>
    <div class="field-box">

      <el-scrollbar class="right-scrollbar">
        <!-- 组件属性 -->

        <el-form v-show="currentTab==='field'" size="small" label-width="90px">
          <el-collapse v-model="activeNames" accordion>

            <el-collapse-item title="图层" name="1">

              <el-form-item v-if="configData.layerName!==undefined" label="图层名称">
                <el-input v-model="configData.layerName" placeholder="请输入图层名称" />
              </el-form-item>

            </el-collapse-item>

            <el-collapse-item title="标题" name="2">
            
              <el-form-item v-if="configData.chartOption.title.text!==undefined" label="标题">
                <el-input v-model="configData.chartOption.title.text" placeholder="请输入标题" />
              </el-form-item>
            
              <el-form-item v-if="configData.chartOption.title.subtext!==undefined" label="副标题">
                <el-input v-model="configData.chartOption.title.subtext" placeholder="请输入副标题" />
              </el-form-item>
            
            </el-collapse-item>

            <el-collapse-item title="表盘" name="3">
            
              <el-form-item v-if="configData.chartOption.radius!==undefined" label="半径">
                <el-input-number size="mini" controls-position="right" v-model="configData.chartOption.radius">
                </el-input-number>
              </el-form-item>
            
              <el-form-item v-if="configData.chartOption.min!==undefined" label="起始值">
                <el-input-number size="mini" controls-position="right" v-model="configData.chartOption.min">
                </el-input-number>
              </el-form-item>
            
              <el-form-item v-if="configData.chartOption.max!==undefined" label="终止值">
                <el-input-number size="mini" controls-position="right" v-model="configData.chartOption.max">
                </el-input-number>
              </el-form-item>
            
              <el-form-item v-if="configData.chartOption.startAngle!==undefined" label="起始角度">
                <el-input-number size="mini" controls-position="right" v-model="configData.chartOption.startAngle">
                </el-input-number>
              </el-form-item>
            
              <el-form-item v-if="configData.chartOption.endAngle!==undefined" label="终止角度">
                <el-input-number size="mini" controls-position="right" v-model="configData.chartOption.endAngle">
                </el-input-number>
              </el-form-item>
            
            </el-collapse-item>

            <el-collapse-item title="刻度" name="4">

              <el-form-item v-if="configData.chartOption.splitNumber!==undefined" label="刻度数">
                <el-input-number size="mini" controls-position="right" v-model="configData.chartOption.splitNumber">
                </el-input-number>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.length!==undefined" label="刻度长度">
                <el-input-number size="mini" controls-position="right" v-model="configData.chartOption.length">
                </el-input-number>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.width!==undefined" label="刻度宽度">
                <el-input-number size="mini" controls-position="right" v-model="configData.chartOption.width">
                </el-input-number>
              </el-form-item>

              <el-form-item v-if="" label="应用主题">
                <el-switch v-model="configData.chartOption.isTopic" />
              </el-form-item>

              <el-form-item v-if="configData.chartOption.isTopic===false" label="刻度颜色">

                <div style="display:flex">
                  <el-form-item label="位置"></el-form-item>
                  <el-form-item label="颜色" style="margin-left: 10px;"></el-form-item>
                </div>

                <div v-for="(item, index) in configData.chartOption.color" :key="index" class="select-item">
                  <el-input-number v-model="item[0]" placeholder="位置" size="small" :min="0" :max="1" :step="0.1"/>
                  <el-color-picker v-model="item[1]" placeholder="颜色" size="small" style="margin-left: 15px;"
                    show-alpha />

                </div>

              </el-form-item>

              <el-form-item v-if="configData.chartOption.noColor!==undefined" label="剩余刻度颜色">
                <el-color-picker v-model="configData.chartOption.noColor" show-alpha></el-color-picker>
              </el-form-item>

            </el-collapse-item>

            <el-collapse-item title="值" name="5">

              <el-form-item v-if="" label="显示数值">
                <el-switch v-model="configData.chartOption.isdetail" />
              </el-form-item>

              <el-form-item v-if="configData.chartOption.detailFamily!==undefined" label="字体">
                <el-select v-model="configData.chartOption.detailFamily" placeholder="请选择">
                  <el-option v-for="(item, index) in detailFamily" :key="index" :label="item" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.detailSize!==undefined" label="数字大小">
                <el-input-number size="mini" controls-position="right" v-model="configData.chartOption.detailSize">
                </el-input-number>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.detailWeight!==undefined" label="数字样式">
                <el-select v-model="configData.chartOption.detailWeight" placeholder="请选择">
                  <el-option v-for="(item,index) in detailWeight" :key="index" :label="item" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.detailColor!==undefined" label="字体颜色">
                <el-color-picker v-model="configData.chartOption.detailColor" show-alpha></el-color-picker>
              </el-form-item>

            </el-collapse-item>

            <el-collapse-item title="动画" name="6">
              <el-form-item v-if="configData.chartOption.animate!==undefined" label="载入动画">
                <el-select v-model="configData.chartOption.animate" placeholder="请选择">
                  <el-option v-for="item in animateOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-collapse-item>
          </el-collapse>

        </el-form>

        <!-- 表单属性 -->
        <el-form v-show="currentTab === 'data'" size="small" label-width="90px">

          <data-source-config :dataSourceType="configData.chartOption.dataSourceType" :customData="configData" :customId="configData.customId" 
            @changeSource="changeSource"  @changeData="changeData" :baseType="''"></data-source-config>

          <el-form-item label="通用处理" v-if="configData.chartOption.customData!==undefined">
            <el-button type="primary" @click="editData">编辑</el-button>
          </el-form-item>

        </el-form>

        <!-- 组件位置 -->
        <el-form v-show="currentTab === 'location'" size="small" label-width="90px">
          <el-form-item label="X位置">
            <el-input-number v-model="configData.x" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="y位置">
            <el-input-number v-model="configData.y" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="宽度">
            <el-input-number v-model="configData.width" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="高度">
            <el-input-number v-model="configData.height" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
        </el-form>
      </el-scrollbar>
    </div>
    
    <el-dialog
      title="通用处理"
      v-if="open"
      :visible.sync="open"
      width="1000px"
      hight="900px"
      append-to-body
      :close-on-click-modal="false"
    >
      <data-editor
        :key="aceKey"
        @submitData="submitData"
        @cancelData="cancelData"
        :customData="configData.chartOption.customData==undefined?'':configData.chartOption.customData"
      ></data-editor>


    </el-dialog>
  </div>
</template>

<script>

import { animateOptions } from '../../animate/animate'
import Databasewebsocket from './chartDB/Databasewebsocket'
import DataEditor from "@/views/tool/datav/components/config/runcode/DataEditor";
import DataSourceConfig from '@/views/tool/datav/components/config/DataConfig/DataSourceConfig'

export default {
  components: {
    Databasewebsocket,
    DataSourceConfig,
    DataEditor
  },
  props: ["costomData", "drawingList"],
  data() {
    return {
      detailFamily: ['宋体', '黑体', '微软雅黑', 'Digital', 'Chunkfive', 'unidreamLED', 'Arial', 'Helvetica', 'sans-serif'],
      detailWeight: ['normal', 'bold', 'bolder', 'lighter'],
      currentTab: 'field',
      configData: this.costomData,
      activeNames: ['1'],
      animateOptions,
      staticDataValue: this.costomData != null ? JSON.stringify(this.costomData.chartOption.staticDataValue) : '',
      interfaceUrl: this.costomData.chartOption.interfaceURL != '' ? this.costomData.chartOption.interfaceURL : '',
      requestParameters: this.costomData.chartOption.requestParameters != '' ? this.costomData.chartOption.requestParameters : '',
      aceKey:Math.random(),
      open:false,
    }
  },
  //页面加载完执行
  mounted() {

  },
  computed: {

  },
  watch: {
    configData: {
      deep: true,
      handler(newVal) {
        this.$emit("costom-change", newVal);
      }
    },
    costomData: {
      deep: true,
      handler(newVal) {
        this.configData = newVal;
        this.staticDataValue = JSON.stringify(newVal.chartOption.staticDataValue);
        this.interfaceUrl = newVal.chartOption.interfaceURL;
        this.requestParameters = newVal.chartOption.requestParameters;
      }
    }
  },
  methods: {
    changeSource(val){
      this.$set(this.configData.chartOption, 'dataSourceType', val);
    },
    changeData(val,id,type){
      if(this.configData.customId == id){
        if(type == 'static'){
          this.$set(this.configData.chartOption, 'staticDataValue', JSON.parse(val));
        }else if(type == 'url'){
          
          if(val.type == "interfaceUrl"){
            this.$set(this.configData.chartOption, 'interfaceURL', val.arr);
          }else if(val.type == "requestParameters"){
            this.$set(this.configData.chartOption, 'requestParameters', val.arr);
          }else if(val.type == "requestMethod"){
            this.$set(this.configData.chartOption, 'requestMethod', val.arr);
          }else if(val.type == "token"){
            this.$set(this.configData.chartOption, 'token', val.arr);
          }else if(val.type == "timeout"){
            this.$set(this.configData.chartOption, 'timeout', val.arr);
          }
        }else if(type == 'database'){
          this.$set(this.configData.chartOption, 'database', val.database);
          this.$set(this.configData.chartOption, 'bi', val.bi);
        }else if(type == 'form'){
          this.$set(this.configData.chartOption, 'formSource', val);
        }else if(type == 'websocket'){
           this.$set(this.configData.chartOption, 'interfaceKey', val);
        }
      }
      
    },
    editData(){
      this.open = true;
    },
    cancelData(){
      this.open = false;
    },
    submitData(data){
      this.$set(this.configData.chartOption, 'customData', data);
      this.open = false;
    }
  }
}
</script>

<style lang="scss" scoped>
  .select-item {
    display: flex;
    border: 1px dashed #fff;
    box-sizing: border-box;

    & .close-btn {
      cursor: pointer;
      color: #f56c6c;
    }

    & .el-input+.el-input {
      margin-left: 4px;
    }
  }

  /deep/ .select-item .el-input--medium .el-input__inner {
    height: 32px;
    width: 90px;
  }

  .el-form-item__label {
    width: 30px
  }

  .select-item+.select-item {
    margin-top: 4px;
  }

  .select-item.sortable-chosen {
    border: 1px dashed #409eff;
  }

  .select-line-icon {
    line-height: 32px;
    font-size: 22px;
    padding: 0 4px;
    color: #777;
  }

  /deep/ .center-tabs .el-tabs__item {
    width: 33%;
    text-align: center;
  }
</style>